import React from 'react';
import {ActionSheet, Icon, Popover, Tools} from "weaver-mobile";
import PropTypes from "prop-types";

const getLabel = Tools.getLabel;

/**
 * 底部菜单
 * eg:绩效底部菜单
 * jiansong 2019/11/8
 */

/**
 *
 * @param show 是否展示菜单
 * @param data 菜单数据
 * @param buttonData 右侧按钮数据
 * @param onSelect 菜单选中事件
 * @param _width 菜单展示宽度
 * @param type 右侧类型 button按钮和+号
 * @param onIconClick 右侧icon点击事件
 * @param iconType 右侧icon类型
 * @param currentkey 当前菜单选中值
 */
const WrMenu = ({show = true, data = [], buttonData = [], onSelect, _width = "120px", type = "button", onIconClick, iconType, currentkey}) => {
    let hasRed = false;
    let _style = {};
    return show && <div className="workrelate-menu-div">
        <div className="workrelate-menu">
            {<Popover
                placement="topLeft"
                onSelect={onSelect}
                mask={true}
                visible={false}
                overlay={
                    <div className="workrelate-menu-item">
                        {data.map((item, index) => {
                            if (!hasRed&&item.rightContent && item.rightContent > 0) {
                                if(item.showRed==undefined){
                                    hasRed = true;
                                }else if(item.showRed){
                                    hasRed = true;
                                }else{
                                    hasRed = false;
                                }
                            }
                            _style = {};
                            if (currentkey && currentkey == item.key) {
                                _style = {backgroundColor: "#def0ff"};
                            }
                            return <Popover.Item key={item.key || index} path={item.path} style={_style}>
                            <span style={{display: "inline-block", "minWidth": _width, paddingRight: "30px"}}>
                                 {item.menuname}
                            </span>
                                <span style={{position: "absolute", right: 0}}>
                                {item.rightContent > 0 && item.rightContent}
                            </span>
                            </Popover.Item>
                        })}
                    </div>
                }
            >
                <div className="workrelate-menu-icondiv"><Icon type="more-3" color="#979797"/>{hasRed &&
                <div className="workrelate-menu-hasred"></div>}</div>
            </Popover>}
            <span className="menu-button">
            {buttonData.length < 4 && buttonData.map((item, index) => {
                return <span key={index} onClick={item.onClick}>{item.content}</span>
            })}
                {buttonData.length > 3 && ([
                    <span key={0} onClick={() => buttonData[0].onClick()}>{buttonData[0].content}</span>,
                    <span key={1} onClick={() => buttonData[1].onClick()}>{buttonData[1].content}</span>,
                    <span key={2} onClick={() => showActionSheet(buttonData)}>{getLabel(17499, "更多")}</span>
                ])}
                {iconType && <div style={{display: "inline-block", width: "100%"}}>
               <span style={{float: "right", paddingRight: "10px", border: "0"}}>
                   <Icon type={iconType} onClick={onIconClick} color="#979797"/>
               </span>
                </div>}
        </span>
        </div>
    </div>
}


const showActionSheet = (buttonData) => {
    let data = [...buttonData];
    data.push({content: getLabel(31129, "取消")})
    ActionSheet.showActionSheetWithOptions({
        options: data,
        cancelButtonIndex: data.length - 1,
        maskClosable: true,
    }, buttonIndex => data[buttonIndex].onClick);
}

WrMenu.propTypes = {
    show: PropTypes.bool,
    data: PropTypes.array,
    buttonData: PropTypes.array,
    onSelect: PropTypes.func,
    _width: PropTypes.string,
    type: PropTypes.string,
    onIconClick: PropTypes.func,
    iconType: PropTypes.string,
    currentkey: PropTypes.string,
}
export default WrMenu;